import React from 'react';
import './MyMenu.less';
import Menu from 'uxcore-menu';
import { cyrydpHost } from "./../../../app/variables";

export default class MyMenu extends React.Component {

  constructor(props) {
    super(props);
    this.map = props.__map__;
  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state || {};

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

  handleMenuClick(e) {
    if (this.props.curKey === e.key) {
      if (this.props.location.pathname.indexOf(e.key) !== -1) {
        return;
      }
    }
    this.props.onMenuClick(e.key);
  }

  render() {

    let menuList = [];
    if (this.props.userconfig && 'menuData' in this.props.userconfig) {
      let menuData = this.props.userconfig.menuData;
      if (menuData && menuData.length >　0) {
        menuData[0].children.map((menu)=> {
          menuList.push({
            name: menu.data.name,
            key: menu.data.url
          });
        });
      }
    }

    const {
      isBDMap = false
    } = this.props;

    return (
      <div className={isBDMap ? "custom-layer-button-rt" : "custom-layer-button-rt-nobdmap"}>
        <Menu onClick={this.handleMenuClick.bind(this)} selectedKeys={[this.props.curKey]} mode="inline">
          {
            menuList.map((menu)=>{
              return <Menu.Item key={menu.key}><i className="kuma-icon kuma-icon-chart"/>{menu.name}</Menu.Item>
            })
          }
          <Menu.Item key="jzy">
            <span>
              <i className="kuma-icon kuma-icon-chart"/>
              <a style={{ color: 'rgba(0, 0, 0, 0.65)' }} href={cyrydpHost} target="_blank">实名制</a>
            </span>
          </Menu.Item>
        </Menu>
      </div>
    );
  }
}

MyMenu.contextTypes = {
  router: React.PropTypes.isRequired
};
